<template>
	<view class="f-f-c">
		<u-navbar
		:autoBack="true" bgColor="#fff"
		leftIconColor='#000'
		:titleStyle="{ color: '#000'}"
		 title="成长中心" rightText='' :border="false" :placeholder="true">
			 
		</u-navbar>
		<view class="" >
			<view class="topBox">
				<view class="bf b-rd f-s-b" style="height: 160rpx;">
					<view class="f1 f-f-c-c" >
						<span class="cp f36">{{info.carbonScore}}</span>
						<span class="mt10 f28 c6">碳币</span>
					</view>
					<view class="f1 f-f-c-c" style="border-left: 1px solid #E4E4E4;border-right: 1px solid #E4E4E4;">
						<span class="cp f36">{{info.integral}}</span>
						<span class="mt10 f28 c6">积分</span>
					</view>
					<view class="f1 f-f-c-c" >
						<span class="cp f36">{{info.carbonTotal}}</span>
						<span class="mt10 f28 c6">减碳量</span>
					</view>
				</view>
			</view>
			<view class="centerBox b-rd b-s m20" style="margin-top: -164rpx;">
				<view class="c6 f-s-b">
					<span>签到成就：已连续签到0天</span>
					<span class="cp" @click="navTo('/pages/growthCenter/signList')">签到记录</span>
				</view>
				<view class="f-s-b mt20">
					<view class="f-f-c" v-for="item,ix in weekInfo" @click="goSign(item)"
					 :class="item == 0 ? 'b3':item == 1 ? 'b2' : item == 2 ? 'b1'  : 'b3'">
						<span class="btnspan">{{item == 0 ? '未签到':item == 1 ? '已签到' : item == 2 ? '已过期'  : '待签到'}}</span>
					</view>
				</view>
				<view class="f-s-b mt20">
					<span class="f-c f28 c9" style="width:82rpx ;">周日</span>
					<span class="f-c f28 c9" style="width:82rpx ;">周一</span>
					<span class="f-c f28 c9" style="width:82rpx ;">周二</span>
					<span class="f-c f28 c9" style="width:82rpx ;">周三</span>
					<span class="f-c f28 c9" style="width:82rpx ;">周四</span>
					<span class="f-c f28 c9" style="width:82rpx ;">周五</span>
					<span class="f-c f28 c9" style="width:82rpx ;">周六</span>
				</view>
			</view>
			<view class="m20">
				<view class="c3 fb">成就专区</view>
				<view class="c6 mt10 f24">完成成就后解锁更多碳币、环保值、积分、勋章</view>
			</view>
			<view class="bottomBox m20 b-s b-rd" style="padding: 26rpx 24rpx;position: relative;"
			 v-for="it2,ix2 in TaskList" :key="ix2">
				<view class="btncss" @click="message(it2.type)">去完成</view>
				<view class="f-s-b">
					<span class="c3 fb">{{it2.type | countTypeTxt}}</span>
					<span class="f c3 f24" @click="navTo('/pages/growthCenter/Taskdetails?id='+ it2.id)">查看规则
					 <u-icon name="arrow-right" color="#333" size="12"></u-icon></span>
				</view>
				<view class="mt20">
					<view class="f-f-c">
						<!-- <span class="c3">{{it2.content}}</span> -->
						<span class="c3">{{it2.title}}</span>
						<span class="c9 f28 mt30" style="white-space:nowrap;overflow: hidden;text-overflow:ellipsis;">{{it2.content}}</span>
						<!-- <span class="c9 f28 mt10">计数类型：{{it2.countType == 1 ?'按天':'按次'}}</span> -->
					</view>
					<!-- <view class="mt20">
						<u-line-progress :percentage="80" :showText="false"></u-line-progress>
					</view> -->
					<view class="f mt20">
						<image src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/hb.png" style="width: 52rpx;height: 52rpx" mode="widthFix"></image>
						<span class="ml10 mr20">积分数：{{it2.integral}}</span>
						<image   src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/xz.png" style="width: 52rpx;height: 52rpx" mode="widthFix"></image>
						<span class="">碳币：{{it2.carbonScore}}</span>
					</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>


<script>
 
	export default {
		data() {
			return {
				info:{},
				weekInfo:[],
				SignList:[],
				TaskList:[],
				show:false,
			}
		},
		onReachBottom() {
			
		},
		onReady() {
			
		},
		onLoad(){
			this.getInfo()
			this.getweekInfo()
			this.getSignList()
			this.getTaskList()
		},
		onShow() {
			
		},
		methods: {
			// 用户信息
			getInfo(){
				
				this.$api.request('get', `user/app/getUser`).then(res => {
				 console.log(res.data,'res')
				 this.info = res.data
				 
				}).catch(err => {
				  that.$api.msg('请求失败，请稍后再试')
				})
			},
			// 签到信息
			getweekInfo(){
				this.$api.request('get', `growth/app/getSignInfo`).then(res => {
				 console.log(res.data,'weekInfo')
				 this.weekInfo = res.data
				 
				}).catch(err => {
				  that.$api.msg('请求失败，请稍后再试')
				})
			},
			// 签到记录
			getSignList(){
				this.$api.request('get', `growth/app/userSignList`).then(res => {
				 console.log(res.rows,'SignList')
				 this.SignList = res.rows
				 
				}).catch(err => {
				  that.$api.msg('请求失败，请稍后再试')
				})
			},
			// 签到
			getSign(){
				let that = this
				this.$api.request('get', `growth/app/add`).then(res => {
				 console.log(res.rows,'SignList')
					that.$api.msg('签到成功')
					that.getweekInfo()
				 
				}).catch(err => {
				  that.$api.msg('请求失败，请稍后再试')
				})
			},
			toSign() {
				const that = this
				uni.showModal({
					// title: '询问',
					content: '您确定要签到吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: (e) => {
						if (e.confirm) {
							that.$api.msg('签到成功')
							that.getSign()
						}
					},
				   
				})
			},
			
			goSign(type){
				console.log(type,'type')
				// this.toSign()
				if(type == -1){
				   this.$api.msg('未到签到时间')
				   return
				}
				if(type == 0){
					this.toSign()
				}
				if(type == 1){
					this.$api.msg('已签到！')
					return
				}
				if(type == 2){
					this.$api.msg('已过期！')
					return
				}
			},
			// 签到记录
			getTaskList(){
				this.$api.request('get', `growth/app/userTaskList`).then(res => {
				 console.log(res.rows,'getTaskList')
				 this.TaskList = res.rows
				 
				}).catch(err => {
				  that.$api.msg('请求失败，请稍后再试')
				})
			},
			message(status){
				let that = this
				let txt = ''
				if(status == 0){
					  txt = '签到任务'
				}else if(status == 1){
					  txt = '订单任务'
				}else if(status == 2){
					  txt = '评价任务'
				}else if(status == 3){
					  txt = '阅读任务'
				}else if(status == 4){
					  txt = '活动任务'
				}
				that.$api.msg('去完成一次' + txt)
			},
			
			
			
			
		}
	}
</script>

<style lang='scss'>
	page,
	.content {
		min-height: 50%;
		background-color: #f8f8f8;
	}

	.topBox{
		/* width: 750rpx; */
		height: 364rpx;
		background: #1AC388;
		border-radius: 0rpx 0rpx 40rpx 40rpx;
		opacity: 1;
		padding: 24rpx;
	}
	.centerBox{
		height: 292rpx;
		background: #fff;
		padding: 34rpx 24rpx 24rpx;
	}
	
	.b1,.b2,.b3{
		width: 82rpx ;
		height: 108rpx;
		position: relative;
		background-image: url('https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/g1.png');
		background-size: 100% 100%;
	    span{
			color: #666;
		}
	}
	.b2{
		background-image: url('https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/g2.png');
		background-size: 100% 100%;
		span{
			color: #fff;
		}
	}
	.b3{
		background-image: url('https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/g3.png');
		background-size: 100% 100%;
		span{
			color: var(--theme);
		}
	}
	
	.btnspan{
		position: absolute;
		bottom: 12rpx;
		left: 50%;
		font-size: 20rpx;
		white-space: nowrap;
		transform: translate(-50%,0);
	}
	.btncss{
		position: absolute;
		top: 80rpx;
		right: 24rpx;
		width: 180rpx;
		height: 68rpx;
		background: var(--theme);
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		text-align: center;
		line-height: 68rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
	}
	.btn2{
	
		width: 600rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #31EB8D 0%, #4CC097 100%);
		box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0,0,0,0.16);
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		opacity: 1;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
	
	}
	
	
</style>
